<template>
	<div class="tenderDetailsPage">
		<CommonTitle titleName="招标（比选）文件协同审批单">
			<template #rightCnBox>
				<el-button
					style="margin-left: auto;"
					v-if="pageType === 'view'"
					@click="toPath"
          class="button_edit"
					>查看审批流程</el-button
				>
			</template>
		</CommonTitle>
		<el-form
			ref="ruleFormRef"
			:model="state.tenderTask"
			:disabled="pageType === 'view'"
			:hide-required-asterisk="pageType === 'view'"
			label-width="200"
			:rules="rules"
		>
			<div class="card-box">
				<span class="title">项目基本信息</span>
				<el-card class="m-t10" shadow="never">
					<el-row class="d-flex a-center j-sb">
						<el-col :span="8" v-if="pageType === 'view'">
							<el-form-item label="审批单编号:">
								<el-input
									disabled
									v-model="state.tenderTask.businessId"
									placeholder=""
								/>
							</el-form-item>
						</el-col>
						<el-col :span="8" v-if="pageType === 'view'">
							<el-form-item label="审批状态:">
								<el-select
									disabled
									v-model="state.tenderTask.auditStatus"
									placeholder=""
								>
									<el-option label="" value="-" />
									<el-option
										v-for="v in auditStatusOptions"
										:key="v.value"
										:label="v.label"
										:value="v.value"
									/>
								</el-select>
							</el-form-item>
						</el-col>
						<el-col :span="8" v-if="pageType === 'view'"> </el-col>
						<el-col :span="8">
							<el-form-item label="关联项目">
								<el-input
									v-model="state.tenderTask.projectMainName"
									placeholder="暂无"
									disabled
								></el-input>
							</el-form-item>
						</el-col>
						<el-col :span="8">
							<el-form-item label="关联招标任务">
								<el-input
									v-model="state.tenderTask.projectTaskName"
									placeholder="暂无"
									disabled
								></el-input>
							</el-form-item>
						</el-col>
						<el-col :span="8">
							<el-form-item label="招标项目类别">
								<el-select
									disabled
									placeholder="请选择"
									v-model="state.tenderTask.projectTypeExplain"
								>
									<el-option
										v-for="v in state.tenderType"
										:key="v.projectTypeId"
										:label="v.typeName"
										:value="v.projectTypeId"
									/>
								</el-select>
							</el-form-item>
						</el-col>
					</el-row>
					<el-row class="d-flex a-center j-sb">
						<el-col :span="8">
							<el-form-item label="招标（比选）人">
								<el-input
									v-model="state.tenderTask.applyUserName"
									placeholder="暂无"
									disabled
								></el-input>
							</el-form-item>
						</el-col>
						<el-col :span="8">
							<el-form-item label="任务来源">
								<el-input
									v-model="state.tenderTask.taskSource"
									placeholder="暂无"
									disabled
								></el-input>
							</el-form-item>
						</el-col>
						<el-col :span="8">
							<el-form-item label="招标（比选）文件名称" prop="applyFileName">
								<el-input
									v-model="state.tenderTask.applyFileName"
									placeholder="请输入招标（比选）文件名称"
								></el-input>
							</el-form-item>
						</el-col>
					</el-row>
				</el-card>
			</div>
			<div class="overview-box m-t20">
				<span class="title">招标项目概况</span>
				<div class="overview-item-box d-flex m-t20 label">
					<div v-if="pageType == 'edit'" class="required_">*</div>
					<div v-else class="required_"></div>
					<el-form-item
						class="overview_el-form-item"
						label-width="0"
						prop="project"
					>
						<el-select placeholder="请选择" v-model="state.tenderTask.project">
							<el-option value="项目状况">项目状况</el-option>
							<el-option value="实施说明">实施说明</el-option>
							<el-option value="服务说明">服务说明</el-option>
						</el-select>
					</el-form-item>
					<el-form-item
						v-if="state.tenderTask.project === '项目状况'"
						class="overview_el-form-item_input"
						label-width="0"
						prop="projectExplain"
					>
						<el-input
							class="m-l10"
							:disabled="pageType === 'view'"
							placeholder="请输入项目状况说明"
							v-model="state.tenderTask.projectExplain"
							type="textarea"
							:autosize="{ minRows: 4, maxRows: 4 }"
						/>
					</el-form-item>
					<el-form-item
						v-if="state.tenderTask.project === '实施说明'"
						class="overview_el-form-item_input"
						label-width="0"
						prop="effectExplain"
					>
						<el-input
							class="m-l10"
							:disabled="pageType === 'view'"
							placeholder="请输入实施说明"
							v-model="state.tenderTask.effectExplain"
							type="textarea"
							:autosize="{ minRows: 4, maxRows: 4 }"
						/>
					</el-form-item>
					<el-form-item
						v-if="state.tenderTask.project === '服务说明'"
						class="overview_el-form-item_input"
						label-width="0"
						prop="serviceExplain"
					>
						<el-input
							class="m-l10"
							:disabled="pageType === 'view'"
							placeholder="请输入服务说明"
							v-model="state.tenderTask.serviceExplain"
							type="textarea"
							:autosize="{ minRows: 4, maxRows: 4 }"
						/>
					</el-form-item>
				</div>
				<div class="overview-item-box d-flex m-t20 label">
					<div v-if="pageType == 'edit'" class="required_">*</div>
					<div v-else class="required_"></div>
					<el-form-item
						class="overview_el-form-item"
						label-width="0"
						prop="control"
					>
						<el-select placeholder="请选择" v-model="state.tenderTask.control">
							<el-option value="预算控制价">预算控制价</el-option>
							<el-option value="最高限价">最高限价</el-option>
						</el-select>
					</el-form-item>
					<el-form-item
						v-if="state.tenderTask.control === '预算控制价'"
						class="overview_el-form-item_input"
						label-width="0"
						prop="budgetAmountExplain"
					>
						<el-input
							class="m-l10"
							:disabled="pageType === 'view'"
							placeholder="请输入预算控制价说明"
							v-model="state.tenderTask.budgetAmountExplain"
							type="textarea"
							:autosize="{ minRows: 4, maxRows: 4 }"
						/>
					</el-form-item>
					<el-form-item
						v-if="state.tenderTask.control === '最高限价'"
						class="overview_el-form-item_input"
						label-width="0"
						prop="limitAmountExplain"
					>
						<el-input
							class="m-l10"
							:disabled="pageType === 'view'"
							placeholder="请输入最高限价说明"
							v-model="state.tenderTask.limitAmountExplain"
							type="textarea"
							:autosize="{ minRows: 4, maxRows: 4 }"
						/>
					</el-form-item>
				</div>
				<div class="overview-item-box d-flex m-t20 label">
					<!-- <span v-if="pageType == 'edit'" class="required">*</span> -->
					<div v-if="pageType == 'edit'" class="required_">*</div>
					<div v-else class="required_"></div>
					<el-form-item
						class="overview_el-form-item"
						label-width="0"
						prop="period"
					>
						<el-select placeholder="请选择" v-model="state.tenderTask.period">
							<el-option value="计划工期">计划工期</el-option>
							<el-option value="实施周期">实施周期</el-option>
							<el-option value="服务周期">服务周期</el-option>
						</el-select>
					</el-form-item>
					<el-form-item
						v-if="state.tenderTask.period === '计划工期'"
						class="overview_el-form-item_input"
						label-width="0"
						prop="planTimeExplain"
					>
						<el-input
							class="m-l10"
							:disabled="pageType === 'view'"
							placeholder="请输入计划工期说明"
							v-model="state.tenderTask.planTimeExplain"
							type="textarea"
							:autosize="{ minRows: 4, maxRows: 4 }"
						/>
					</el-form-item>
					<el-form-item
						v-if="state.tenderTask.period === '实施周期'"
						class="overview_el-form-item_input"
						label-width="0"
						prop="effectTimeExplain"
					>
						<el-input
							:disabled="pageType === 'view'"
							class="m-l10"
							placeholder="请输入实施周期说明"
							v-model="state.tenderTask.effectTimeExplain"
							type="textarea"
							:autosize="{ minRows: 4, maxRows: 4 }"
						/>
					</el-form-item>
					<el-form-item
						v-if="state.tenderTask.period === '服务周期'"
						class="overview_el-form-item_input"
						label-width="0"
						prop="serviceTimeExplain"
					>
						<el-input
							:disabled="pageType === 'view'"
							class="m-l10"
							placeholder="请输入服务周期说明"
							v-model="state.tenderTask.serviceTimeExplain"
							type="textarea"
							:autosize="{ minRows: 4, maxRows: 4 }"
						/>
					</el-form-item>
				</div>
				<div class="overview-item-box d-flex m-t20 label m-l10">
					<el-form-item
						class="overview_el-form-item_input overview_el-form-item_one"
						label="支付方式说明："
						prop="payExplain"
					>
						<el-input
							:disabled="pageType === 'view'"
							v-model="state.tenderTask.payExplain"
							class="m-l10"
							placeholder="请输入支付方式说明"
							type="textarea"
							:autosize="{ minRows: 4, maxRows: 4 }"
						/>
					</el-form-item>
				</div>
				<div class="overview-item-box d-flex m-t20 m-l10">
					<div class="title-box"></div>
					<div class="right-box d-flex" style="margin-left: -15px">
						<div class="input-box-item label">
							<el-form-item
								class="fz_label"
								label="评标办法："
								label-width="120px"
								prop="bidEvaluationType"
							>
								<el-select
									:disabled="pageType === 'view'"
									v-model="state.tenderTask.bidEvaluationType"
									placeholder="请选择"
								>
									<el-option
										v-for="v in bidEvaluationTypeOptions"
										:value="v.value"
										:label="v.label"
									></el-option>
								</el-select>
							</el-form-item>
						</div>
						<div class="input-box-item m-l20 label">
							<el-form-item
								label="选聘方式："
								class="fz_label"
								label-width="120px"
								prop="selectionType"
								><el-select
									:disabled="pageType === 'view'"
									v-model="state.tenderTask.selectionType"
									placeholder="请选择"
								>
									<el-option
										v-for="v in selectionTypeOptions"
										:value="v.value"
										:label="v.label"
									></el-option>
								</el-select>
							</el-form-item>
						</div>
						<div class="input-box-item d-flex a-center m-l20 label">
							<el-form-item
								label="招标代理机构名称："
								class="fz_label"
								label-width="180px"
								prop="agentName"
							>
								<el-input
									style="width: 200px"
									:disabled="pageType === 'view'"
									v-model="state.tenderTask.agentName"
									placeholder="请输入招标代理机构名称"
								></el-input>
							</el-form-item>
						</div>
					</div>
				</div>
				<div class="overview-item-box d-flex m-t20 label m-l10">
					<div class="title-box d-flex j-end">
						<span class="fz_">备注：</span>
					</div>
					<el-input
						v-model="state.tenderTask.remark"
						:disabled="pageType === 'view'"
						class="m-l10"
						placeholder="请输入内容"
						type="textarea"
						:autosize="{ minRows: 4, maxRows: 4 }"
					/>
				</div>
			</div>
		</el-form>
		<!-- <div class="card-box m-t20">
			<span class="title">项目基本信息</span>
			<el-card class="annex-card m-t10" shadow="never"> </el-card>
		</div> -->
		<div class="card-box m-t20">
			<span class="title">附件详情</span>
			<attachment-details
				:pageType="pageType"
				:tenderTaskId="tenderTaskId"
				:fileList="state.tenderTask.files"
				:businessId="state.tenderTask.businessId"
				:businessType="11"
				@onSuccess="onSuccess"
			></attachment-details>
		</div>
		<div class="title_ m-t40 m-b20">其他信息</div>
		<div class="other m-r20 d-flex">
			<div class="other_item d-flex">
				<div class="lebel">申请人</div>
				<div class="conetnt m-l10">
					{{ state.tenderTask.applyUserName }}
				</div>
			</div>
			<div class="other_item d-flex">
				<div class="lebel">申请部门</div>
				<div class="conetnt m-l10">{{ state.tenderTask.applyUserDeptName }}</div>
			</div>
			<div class="other_item d-flex">
				<div class="lebel">创建时间</div>
				<div class="conetnt m-l10">{{ state.tenderTask.createTime }}</div>
			</div>
		</div>
	</div>
	<el-button
		class="approval-button button_funtion"
		@click="saveApply"
		v-if="pageType == 'edit'"
		:loading="BtnLoading"
		>发起审批</el-button
	>
</template>

<script setup>
import CommonTitle from "@/components/CommonTitle";
import {
	ElCard,
	ElCol,
	ElForm,
	ElFormItem,
	ElRow,
	ElSelect,
	ElOption,
	ElMessageBox,
	ElMessage
} from "element-plus";
import { collaborativeApprovalApi } from "@/api/biddingProject";
import { useRouter, useRoute } from "vue-router";
import { useStore } from "vuex";
import {onMounted, ref, reactive, watch, nextTick} from "vue";
import AttachmentDetails from "./components/AttachmentDetails.vue";
import { approveApi, processApi } from "@/api/biddingProject";
import { getURLhandler } from "@/views/constructionProjectManage/static/utools.js";

import {
	bidEvaluationTypeOptions,
	selectionTypeOptions,
	auditStatusOptions,
} from "@/common/dict/dictCollect";
import {useSetFormData} from "@/hooks/setFormData";
const router = useRouter();
const route = useRoute();

const store = useStore();
const BtnLoading = ref(false);
const tenderTaskId = getURLhandler(route.path).tenderTaskId;
const pageType = ref(getURLhandler(route.path).pageType);
const businessId = getURLhandler(route.path).businessId;

const rules = reactive({
	project: [
		{
			required: true,
			message: "请选择类型",
			trigger: "change",
		},
	],
	applyFileName: [
		{
			required: true,
			message: "请输入招标（比选）文件名称",
			trigger: "blur",
		},
	],

	projectExplain: [
		{
			required: true,
			message: "请输入项目状况说明",
			trigger: "blur",
		},
	],
	planTimeExplain: [
		{
			required: true,
			message: "请输入计划工期说明",
			trigger: "blur",
		},
	],
	effectTimeExplain: [
		{
			required: true,
			message: "请输入实施周期说明",
			trigger: "blur",
		},
	],
	serviceTimeExplain: [
		{
			required: true,
			message: "请输入服务周期说明",
			trigger: "blur",
		},
	],
	payExplain: [
		{
			required: true,
			message: "请输入支付方式说明",
			trigger: "blur",
		},
	],
	budgetAmountExplain: [
		{
			required: true,
			message: "请输入预算控制价说明",
			trigger: "blur",
		},
	],
	limitAmountExplain: [
		{
			required: true,
			message: "请输入最高限价说明",
			trigger: "blur",
		},
	],
	serviceExplain: [
		{
			required: true,
			message: "请输入服务说明",
			trigger: "blur",
		},
	],
	effectExplain: [
		{
			required: true,
			message: "请输入实施说明",
			trigger: "blur",
		},
	],
	// agentName: [
	// 	{
	// 		required: true,
	// 		message: "请输入招标代理机构名称",
	// 		trigger: "blur",
	// 	},
	// ],
	selectionType: [
		{
			required: true,
			message: "请选择评标方式",
			trigger: "change",
		},
	],
	bidEvaluationType: [
		{
			required: true,
			message: "请选择评标办法",
			trigger: "change",
		},
	],
	period: [
		{
			required: true,
			message: "请选择周期方法",
			trigger: "change",
		},
	],
	control: [
		{
			required: true,
			message: "请选择限价",
			trigger: "change",
		},
	],
});

const state = reactive({
	tenderTask: {},
	tenderType: store.state.common.tenderType,
	files: [],
});


const {
	setData,
	getData,
	getAttributeNum,
	filterEmptyAttributes,
} = useSetFormData({
	key:`tenderDetails-${getURLhandler(route.path).tenderTaskId}-pageType${getURLhandler(route.path).pageType}`,
});

const isBool = ref(false);
watch([()=>pageType,()=>state.tenderTask],(newVal)=>{
	if(newVal[0].value==='edit' &&  Object.keys(newVal[1]).length > 1 && isBool.value){
		setData(state.tenderTask);
	}
},{deep:true})

const getApplyInfo = () => {
	approveApi.getApplyInfo({ tenderTaskId, businessId }).then(async (res) => {
		let {cdoe, msg, data} = res;

		if (getURLhandler(route.path).pageType === 'edit') {
			if (getAttributeNum(await getData()) > getAttributeNum(data)) { // 缓存中的数据比接口数据的多
				data = Object.assign({},await getData(), filterEmptyAttributes(data))
			}
			if (getAttributeNum(await getData()) <= getAttributeNum(data)) { // 缓存中的数据比接口数据的少或者相同
				data = filterEmptyAttributes(data)
			}
		}

		for (let key in data) {
			if (data[key]) {
				state.tenderTask[key] = data[key];
			}
		}
		if (!state.tenderTask.files) {
			state.tenderTask.files = [];
		}
		// state.tenderTask.project = "项目状况";
		// state.tenderTask.control = "预算控制价";
		// state.tenderTask.period = "计划工期";
		handelArrOptions("period", data);
		handelArrOptions("control", data);
		handelArrOptions("project", data);

		await nextTick(() => {
			isBool.value = true;
		})
	});
};

const onSuccess = (arr) => {
  state.tenderTask.files = arr;
}

const handelArrOptions = (key, data) => {
	if (key === "period") {
		const arr = [
			{
				name: "计划工期",
				conten: data.planTimeExplain,
			},
			{
				name: "实施周期",
				conten: data.effectTimeExplain,
			},
			{
				name: "服务周期",
				conten: data.serviceTimeExplain,
			},
		];
		state.tenderTask[key] = arr.some((v) => v.conten)
			? arr.find((v) => v.conten).name
			: "计划工期";
	}
	if (key === "project") {
		const arr = [
			{
				name: "项目状况",
				conten: data.projectExplain,
			},
			{
				name: "实施说明",
				conten: data.effectExplain,
			},
			{
				name: "服务说明",
				conten: data.serviceExplain,
			},
		];
		state.tenderTask[key] = arr.some((v) => v.conten)
			? arr.find((v) => v.conten).name
			: "项目状况";
	}
	if (key === "control") {
		const arr = [
			{
				name: "预算控制价",
				conten: data.budgetAmountExplain,
			},
			{
				name: "最高限价",
				conten: data.limitAmountExplain,
			},
		];
		state.tenderTask[key] = arr.some((v) => v.conten)
			? arr.find((v) => v.conten).name
			: "预算控制价";
	}
};
const toPath = () => {
	window.open(state.tenderTask.oaLink);
};
const getTypeList = () => {
	if (store.state.common.tenderType.length === 0) {
		processApi.getTypeList().then((res) => {
			if (res.code == 200) {
				state.tenderType = res.data;
				store.commit("set_tenderType", res.data);
			}
		});
	} else {
		state.tenderType = store.state.common.tenderType;
	}
};
const ruleFormRef = ref(null);
const saveApply = () => {
	if(!(state.tenderTask.files && state.tenderTask.files.length)){
		return ElMessage.warning('请上传附件!');
	}
	ruleFormRef.value.validate((valid, fields) => {
		if (valid) {
			ElMessageBox.confirm("是否确认发起审批?", "提示", {
				confirmButtonText: "确认发送",
				cancelButtonText: "取消",
				type: "warning",
				confirmButtonClass: "ExitConfirmButton",
				cancelButtonClass: "ExitCancelButton",
				center: true,
			}).then(() => {
				BtnLoading.value = true;
				approveApi.saveApply(state.tenderTask).then((res) => {
					if (res.code == 200) {
						ElMessage.success("操作成功");
						pageType.value = "view";
						getApplyInfo();
					}
					BtnLoading.value = false;
				});
			});
		}
	});
};

onMounted(() => {
	getApplyInfo();
});
</script>

<style lang="scss" scoped>
.label[required]::before {
	content: "*";
	color: red;
	margin-right: 5px;
}

.label span[required]::before {
	content: "*";
	color: red;
	margin-right: 5px;
}

.title-box[required]::before {
	content: "*";
	color: red;
	margin-right: 5px;
}

.approval-button {
	position: fixed;
	top: 80%;
	right: 120px;
	// box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.1);
	box-shadow: 0px 0px 12px 0 rgba(0, 0, 0, 0.12);
}

.tenderDetailsPage {
	width: 100%;
	position: relative;
	.card-box {
		.el-select {
			width: 100%;
		}
		.title {
			font-size: 16px;
			font-weight: bold;
			color: #1a1a1a;
		}
	}
	.overview-box {
		.title {
			font-size: 16px;
			font-weight: bold;
			color: #1a1a1a;
		}
		.overview-item-box {
			.el-select {
				width: 200px;
			}
			.title-box {
				width: 200px;
			}
		}
	}
	.other {
		border-radius: 10px;
		border: 1px solid #e3e7f1;
		padding: 32px 72px;
		justify-content: space-between;
		.other_item {
			.lebel {
				font-size: 16px;
				font-weight: 500;
				color: #1a1a1a;
				line-height: 40px;
			}
			.conetnt {
				width: 300px;
				height: 40px;
				background: #f7f7fa;
				border-radius: 4px;
				line-height: 40px;
				padding-left: 20px;
			}
		}
	}
	.title_ {
		font-size: 16px;
		font-weight: bold;
		color: #1a1a1a;
	}

	.overview_el-form-item {
		height: 40px;
		width: 165px;

		.el-select {
			width: 150px;
		}
	}
	.overview_el-form-item_input {
		width: 100%;
	}
	.overview_el-form-item_one {
		:deep(.el-form-item__label) {
			width: 165px !important;
			font-size: 12px;
		}
	}
	// .el-form-item {
	//   width: 100%;
	// }
}
.el-form {
	.el-form-item {
		:deep(.el-form-item__label) {
			font-size: 16px;
		}
	}
}
:deep(.el-form-item__label, .fz_) {
	font-size: 12px !important;
}
</style>
<style>
.ExitConfirmButton {
	background: #ff6f29 !important;
	color: #fff !important;
	border: 0;
}
.ExitCancelButton {
	background-color: #fff !important;
}

.required_ {
	width: 15px;
	color: var(--el-color-danger);
	margin-right: 5px;
}
</style>
